<template>
    <view style="display: flex; flex-direction: column">
        <community-nav-search></community-nav-search>
        <view class="right_back"></view>
        <view class="left_back"></view>
        <view class="swiper_main_view">
            <view class="swiper_content_view">
                <swiper style="height: 100%; width: 100%" @change="swiperChangeEvent">
                    <swiper-item class="huatigc_view">
                        <view class="huatigc_header">
                            <label class="huti_title">话题广场</label>
                            <view @click="goToTopicList" class="huti_more">
                                <label style="color: rgba(35, 73, 65, 0.5); font-size: 24rpx">查看更多</label>
                                <image
                                    style="margin-left: 4rpx; width: 8rpx; height: 16rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_right.png"
                                ></image>
                            </view>
                        </view>
                        <view v-if="allTopicList.length > 0" class="huati_list">
                            <view
                                @click="goToToicDetail(itemA)"
                                class="huti_cell"
                                v-for="(itemA, indexA) in allTopicList.slice(0, 3)"
                                :key="indexA"
                            >
                                <image
                                    :src="itemA.picAbsolute"
                                    style="height: 80rpx; width: 80rpx; border-radius: 8rpx; background-color: #eaeaea"
                                >
                                </image>
                                <view
                                    style="
                                        margin-left: 20rpx;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                    "
                                >
                                    <label
                                        style="
                                            width: 580rpx;
                                            color: #333333;
                                            font-size: 28rpx;
                                            font-weight: 500;
                                            display: -webkit-box;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;
                                        "
                                        >{{ itemA.name }}</label
                                    >
                                    <label style="color: #999999; font-size: 24rpx; font-weight: 400"
                                        >{{ itemA.follows }}人参与·{{ itemA.trends }}条讨论</label
                                    >
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                    <swiper-item class="huatigc_view" v-if="followTopicList.length > 0">
                        <view class="huatigc_header">
                            <label class="huti_title">我的关注</label>
                            <view @click="goToTopicList" class="huti_more">
                                <label style="color: rgba(35, 73, 65, 0.5); font-size: 24rpx">查看更多</label>
                                <image
                                    style="margin-left: 4rpx; width: 8rpx; height: 16rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homeuserdata/user_data_right.png"
                                ></image>
                            </view>
                        </view>
                        <view class="huati_list">
                            <view
                                @click="goToToicDetail(fitem)"
                                v-if="followTopicList.length > 0"
                                class="huti_cell"
                                v-for="(fitem, findex) in followTopicList.slice(0, 3)"
                                :key="findex"
                            >
                                <image
                                    :src="fitem.picAbsolute"
                                    style="height: 80rpx; width: 80rpx; border-radius: 8rpx; background-color: #eaeaea"
                                >
                                </image>
                                <view
                                    style="
                                        margin-left: 20rpx;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                    "
                                >
                                    <label
                                        style="
                                            width: 580rpx;
                                            color: #333333;
                                            font-size: 28rpx;
                                            font-weight: 500;
                                            display: -webkit-box;
                                            -webkit-box-orient: vertical;
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;
                                        "
                                        >{{ fitem.name }}</label
                                    >
                                    <label style="color: #999999; font-size: 24rpx; font-weight: 400"
                                        >{{ fitem.follows }}人参与·{{ fitem.trends }}条讨论</label
                                    >
                                </view>
                            </view>
                            <view v-if="followTopicList.length < 3" @click="goToTopic" class="huti_cell">
                                <image
                                    style="height: 80rpx; width: 80rpx"
                                    src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/addhuati.png"
                                ></image>
                                <label style="margin-left: 20rpx; color: #333333; font-size: 28rpx; font-weight: 500"
                                    >发现更多话题</label
                                >
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
            <view v-if="followTopicList.length > 0" class="indicator-view">
                <view :class="['indicator', indicatorIndex == 0 ? 'indicator-sel' : '']"></view>
                <view :class="['indicator', indicatorIndex == 1 ? 'indicator-sel' : '']"></view>
            </view>
        </view>
        <view class="dynamic_view">
            <label style="color: #333333; font-size: 32rpx; font-weight: 500">动态</label>
            <view
                style="
                    margin-right: 0rpx;
                    margin-left: auto;
                    display: flex;
                    flex-direction: row-reverse;
                    align-items: center;
                "
            >
                <label @click="filterEvent(1)" :class="isTime == 1 ? 'shaixuan_sel' : 'shaixuan'">按时间</label>
                <label
                    @click="filterEvent(2)"
                    style="margin-right: 32rpx"
                    :class="isTime == 2 ? 'shaixuan_sel' : 'shaixuan'"
                    >按点赞</label
                >
            </view>
        </view>
        <view class="search-main" style="margin-top: 0rpx; position: relative">
            <view
                @click="goToDetail(dindex)"
                class="article-main"
                v-for="(dynamicItem, dindex) in trendsList"
                :key="dindex"
            >
                <view class="search-article">
                    <view @click.stop="goToHomePage(dynamicItem.userId)" class="article-left">
                        <view class="article-avatar">
                            <u-image width="80rpx" height="80rpx" :src="dynamicItem.avatarAbsolute" shape="circle">
                            </u-image>
                        </view>
                        <view class="article-title1">
                            <view>{{ dynamicItem.userName }}</view>
                            <view class="article-time"
                                >{{ request.getDateTimeFormat(dynamicItem.publishTime) }}
                                <text>发布了</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="userInfo.uid != dynamicItem.userId">
                        <view
                            class="search-right1"
                            @click.stop="goCollect(dynamicItem)"
                            v-if="dynamicItem.followStatus == 0"
                        >
                            <image
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search/add.png"
                                mode=""
                            ></image
                            >关注
                        </view>
                        <view class="search-right2" v-else @click.stop="goCollect(dynamicItem)">已关注</view>
                    </view>
                </view>
                <view class="articleTitle">{{ dynamicItem.title }}</view>
                <view class="articleContent">{{ dynamicItem.experience }}</view>
                <view style="position: relative" class="articleImg">
                    <view class="imgItem" v-for="(img, index) in dynamicItem.picList.slice(0, 3)" :key="index">
                        <image
                            @click.stop="showImagePrevie(index, dynamicItem)"
                            :src="img"
                            mode="aspectFill"
                            class="imgPic"
                        >
                        </image>
                        <label v-show="dynamicItem.picList.length > 3 && index === 2" class="overLabel"
                            >+{{ dynamicItem.picList.length - 3 }}</label
                        >
                    </view>
                </view>
                <view class="articleBottom" style="justify-content: space-between">
                    <view
                        @click.stop="goToSigleTopic(dynamicItem.topicId)"
                        v-if="dynamicItem.topicId"
                        class="articleBottom-left"
                    >
                        <view class="text">#</view>
                        <view class="one_line">{{ dynamicItem.topicName }}</view>
                    </view>
                    <view v-else style="height: 34rpx; width: 34rpx"></view>
                    <view class="articleBottom-right">
                        <view class="article-message">
                            <image
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_comment.png"
                            ></image>
                            <text>{{ dynamicItem.comments }}</text>
                        </view>
                        <view @click.stop="doTrends(dynamicItem)" class="article-message" v-if="isAuthNicknamePhone()">
                            <image
                                v-if="dynamicItem.thumbsStatus == 0"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                            ></image>
                            <image
                                v-if="dynamicItem.thumbsStatus == 1"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                            ></image>
                            <text v-if="dynamicItem.thumbsStatus == 0">{{ dynamicItem.thumbs }}</text>
                            <text v-if="dynamicItem.thumbsStatus == 1" style="color: #ff6f89">{{
                                dynamicItem.thumbs
                            }}</text>
                        </view>
                        <view class="article-message" v-else>
                            <image
                                v-if="dynamicItem.thumbsStatus == 0"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good.png"
                            ></image>
                            <image
                                v-if="dynamicItem.thumbsStatus == 1"
                                src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/community/dynamic_menu_good_sel.png"
                            ></image>
                            <text v-if="dynamicItem.thumbsStatus == 0">{{ dynamicItem.thumbs }}</text>
                            <text v-if="dynamicItem.thumbsStatus == 1" style="color: #ff6f89">{{
                                dynamicItem.thumbs
                            }}</text>
                        </view>
                    </view>
                </view>

                <view
                    class="empty"
                    v-if="trendsList.length == 0"
                    style="position: absolute; top: 20%; left: 0; width: 100%; text-align: center"
                >
                    <image
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/home/artempty.png"
                        mode=""
                    ></image>
                    <text>当前话题暂无动态,快来发布第一条动态吧~</text>
                </view>
            </view>
            <u-loadmore
                v-if="more"
                :status="status"
                loadingText="加载中"
                loadmoreText="上拉加载更多"
                nomoreText="已经到底啦～"
                fontSize="28"
                iconSize="30"
                marginTop="30"
                marginBottom="30"
            ></u-loadmore>
        </view>
        <view class="publish-btn" @click="goToPublish">发布动态</view>
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
    data() {
        return {
            indicatorIndex: 0,
            isTime: 0,
            allTopicList: [],
            followTopicList: [],
            trendsList: [],
            trendForm: {
                pageNum: 1,
                pageSize: 10,
                isAsc: "descending",
                orderByColumn: "top desc,topTime desc,publishTime",
            },
            status: "loadmore",
            more: false,
            requestLoading: false,
            dynamicListRequestLoading: false,
            showLogin: false,
        };
    },
    onReachBottom() {
        if (this.more == false) return;
        this.status = "loading";
        this.trendForm.pageNum = ++this.trendForm.pageNum;
        this.dynamicListRequest(false);
    },
    computed: {
        ...mapState(["isLogin", "userInfo"]),
    },
    methods: {
        ...mapMutations(["loginSaveUserInfo", "logout"]),
        showImagePrevie(index, item) {
            uni.previewImage({
                urls: item.picList,
                current: index,
            });
        },
        goToHomePage(userId) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: `/packageMine/pages/homepage/homepage?userId=${userId}`,
            });
        },
        isAuthNicknamePhone() {
            if (this.userInfo.nickname == "" || this.userInfo.nickname == null || this.userInfo.nickname == undefined) {
                this.authUserInfo();
                return false;
            }
            if (this.userInfo.phone == "" || this.userInfo.phone == null || this.userInfo.phone == undefined) {
                if (this.showLogin === false) {
                    this.showLogin = true;
                    uni.navigateTo({
                        url: "/pages/login/login",
                    });
                }

                return false;
            }
            return true;
        },

        requestUser() {
            this.request
                .httpTokenRequest(`/mp-api/wx/user/detail/${this.userInfo.uid}`, null, "POST", true)
                .then((res) => {
                    if (res.code == 0) {
                        this.loginSaveUserInfo(res.data);
                    }
                });
        },
        authUserInfo() {
            uni.getUserProfile({
                desc: "Wexin",
                success: (res) => {
                    let avatar = res.userInfo.avatarUrl;
                    let nickname = res.userInfo.nickName;
                    this.sendUserInfo(avatar, nickname);
                },
            });
        },
        sendUserInfo(avatar, nickname) {
            var postData = {};
            postData.uid = this.userInfo.uid;
            postData.avatar = avatar;
            postData.nickname = nickname;
            this.request.httpTokenJsonRequest("/mp-api/wx/user/update", postData, "POST", false).then((res) => {
                if (res.code == 0) {
                    if (res.data.phone == "" || res.data.phone == null || res.data.phone == undefined) {
                        uni.navigateTo({
                            url: "/pages/login/login",
                        });
                    }
                    this.requestUser();
                }
            });
        },
        filterEvent(e) {
            this.isTime = e;
            this.dynamicListRequest(true);
        },
        swiperChangeEvent(e) {
            this.indicatorIndex = e.detail.current;
        },
        goToTopic() {
            uni.navigateTo({
                url: "./topicList/topicList",
            });
        },
        goToSigleTopic(id) {
            uni.navigateTo({
                url: `/pages/community/topicDetail/topicDetail?id=${id}`,
            });
        },
        goToPublish() {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: "./publishDynamic/publishDynamic",
            });
        },
        goToDetail(index) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            uni.navigateTo({
                url: `./dynamicDetail/dynamicDetail?id=${this.trendsList[index].id}`,
            });
        },
        topicListRequest() {
            this.request.httpTokenRequest("/mp-api/wx/home/search/topic", {}, "POST").then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data.list) {
                        const topicList = res.data.list.filter((item) => {
                            return !item.followStatus;
                        });
                        this.allTopicList = topicList;
                    }
                }
            });
        },
        followTopicListRequest() {
            this.request.httpTokenJsonRequest("/mp-api/wx/topic/myfollow", null, "POST", true).then((res) => {
                uni.stopPullDownRefresh();
                if (res.code == 0) {
                    if (res.data) {
                        this.followTopicList = res.data;
                    }
                }
            });
        },
        dynamicListRequest(isFresh) {
            if (this.dynamicListRequestLoading) {
                return;
            }
            this.dynamicListRequestLoading = true;
            if (isFresh) {
                this.trendForm.pageNum = 1;
                this.trendForm.pageSize = 10;
            }
            if (this.isTime == 1) {
                this.trendForm.orderByColumn = "publishTime";
            } else if (this.isTime == 2) {
                this.trendForm.orderByColumn = "thumbs";
            } else {
                this.trendForm.orderByColumn = "top desc,topTime desc,publishTime";
            }
            this.request
                .httpTokenRequest("/mp-api/wx/home/search/trends", this.trendForm, "POST", true)
                .then((res) => {
                    uni.stopPullDownRefresh();
                    if (res.code == 0) {
                        if (res.data.list && isFresh) {
                            this.trendsList = res.data.list;
                        } else {
                            res.data.list.forEach((item) => {
                                this.trendsList.push(item);
                            });
                        }
                        if (res.data.total > this.trendsList.length) {
                            this.status = "loadmore";
                            this.more = true;
                        } else {
                            this.more = false;
                            this.status = "nomore";
                        }
                    } else {
                        this.more = false;
                        this.status = "nomore";
                    }
                    this.dynamicListRequestLoading = false;
                })
                .catch(() => {
                    this.dynamicListRequestLoading = false;
                });
        },
        goToTopicList() {
            uni.navigateTo({
                url: "./topicList/topicList",
            });
        },
        goToToicDetail(val) {
            if (val.id) {
                uni.navigateTo({
                    url: `./topicDetail/topicDetail?id=${val.id}`,
                });
            }
        },
        goCollect(item) {
            if (this.isAuthNicknamePhone() == false) {
                return;
            }
            let form = {
                id: item.userId,
                followStatus: 1,
            };
            if (item.followStatus == 0) {
                form.followStatus = 1;
                this.request.httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true).then((res) => {
                    if (res.code != 0) {
                        uni.showToast({
                            icon: "none",
                            title: res.message,
                        });
                    } else {
                        this.trendsList.forEach((dynamicI) => {
                            if (dynamicI.userId == item.userId) {
                                dynamicI.followStatus = 1;
                            }
                        });
                    }
                });
            } else {
                uni.showModal({
                    cancelText: "取消",
                    confirmText: "确定",
                    title: "是否确认取消关注此用户？",
                    success: (res) => {
                        if (res.confirm) {
                            form.followStatus = 0;
                            this.request
                                .httpTokenJsonRequest("/mp-api/wx/user/follow", form, "POST", true)
                                .then((res) => {
                                    if (res.code != 0) {
                                        uni.showToast({
                                            icon: "none",
                                            title: res.message,
                                        });
                                    } else {
                                        this.trendsList.forEach((dynamicI) => {
                                            if (dynamicI.userId == item.userId) {
                                                dynamicI.followStatus = 0;
                                            }
                                        });
                                    }
                                });
                        }
                    },
                });
            }
        },
        doTrends(item) {
            if (this.requestLoading) {
                return;
            }
            this.requestLoading = true;
            try {
                let form = {
                    id: item.id,
                    thumbsStatus: 1,
                };
                if (item.thumbsStatus == 0) {
                    form.thumbsStatus = 1;
                    this.request.httpTokenJsonRequest("/mp-api/wx/trends/thumbs", form, "POST", true).then((res) => {
                        if (res.code != 0) {
                            uni.showToast({
                                icon: "none",
                                title: res.message,
                            });
                        } else {
                            item.thumbsStatus = 1;
                            item.thumbs = item.thumbs + 1;
                        }
                    });
                } else {
                    form.thumbsStatus = 0;
                    this.request.httpTokenJsonRequest("/mp-api/wx/trends/thumbs", form, "POST", true).then((res) => {
                        if (res.code != 0) {
                            uni.showToast({
                                icon: "none",
                                title: res.message,
                            });
                        } else {
                            item.thumbsStatus = 0;
                            if (item.thumbs > 0) {
                                item.thumbs = item.thumbs - 1;
                            }
                        }
                    });
                }
            } catch (e) {}
            setTimeout(() => {
                this.requestLoading = false;
            }, 800);
        },
    },
    onLoad() {
        // this.topicListRequest()
        // this.followTopicListRequest()
        // this.dynamicListRequest(true)
    },
    onShow() {
        this.showLogin = false;
        this.topicListRequest();
        this.followTopicListRequest();
        this.dynamicListRequest(true);
        uni.$once("dynamicItem", (dynamicItem) => {
            this.trendsList.forEach((item) => {
                if (item.id == dynamicItem.id) {
                    item.followStatus = dynamicItem.followStatus;
                    item.thumbsStatus = dynamicItem.thumbsStatus;
                    item.thumbs = dynamicItem.thumbs;
                    item.comments = dynamicItem.comments;
                }
            });
        });
        uni.$once("dynamicUser", (userItem) => {
            this.trendsList.forEach((item) => {
                if (item.userId == userItem.uid) {
                    item.followStatus = userItem.followStatus;
                }
            });
        });
        // this.dynamicListRequest(true)
    },
    onTabItemTap() {
        this.dynamicListRequest(true);
    },
    onPullDownRefresh() {
        this.isTime = 0;
        this.topicListRequest();
        this.followTopicListRequest();
        this.dynamicListRequest(true);
    },
};
</script>

<style lang="scss" scoped>
.right_back {
    width: 256rpx;
    height: 458rpx;
    background: #3ea38d;
    opacity: 0.3;
    filter: blur(50rpx);
    position: absolute;
    z-index: -1;
    left: 0;
    top: 200rpx;
}

.left_back {
    width: 171rpx;
    height: 282rpx;
    background: #ff934a;
    opacity: 0.2;
    filter: blur(22rpx);
    float: right;
    right: 0;
    top: 440rpx;
    z-index: -1;
    position: absolute;
}

.swiper_main_view {
    width: calc(100% - 9rpx);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0rpx 0rpx 40rpx 40rpx;
    border: 2rpx solid #ffffff;
    height: 480rpx;
    position: relative;
    display: flex;
    flex-direction: column;
}

.swiper_content_view {
    width: 100%;
    height: 442rpx;
}

.huatigc_view {
    display: flex;
    flex-direction: column;
}

.huatigc_header {
    display: flex;
    flex-direction: row;
}

.huti_title {
    margin-left: 30rpx;
    margin-top: 30rpx;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
}

.huti_more {
    margin-top: 30rpx;
    margin-left: auto;
    margin-right: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.huati_list {
    display: flex;
    flex-direction: column;
    margin-left: 30rpx;
    width: calc(100% - 60rpx);
    margin-top: 30rpx;
}

.huti_cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-bottom: 30rpx;
    height: 80rpx;
}

.indicator-view {
    width: 64rpx;
    position: absolute;
    height: 8rpx;
    left: calc(50% - 32rpx);
    top: auto;
    bottom: 30rpx;
    background-color: #ededed;
    border-radius: 4rpx;
    display: flex;
    flex-direction: row;
}

.indicator {
    width: 32rpx;
    height: 8rpx;
    border-radius: 4rpx;
}

.indicator-sel {
    background-color: #234941;
}

.publish-btn {
    width: 240rpx;
    height: 88rpx;
    background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
    box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(55, 168, 148, 0.2);
    border-radius: 24rpx;
    position: fixed;
    left: calc(50% - 120rpx);
    top: auto;
    bottom: 60rpx;
    z-index: 1000;
    color: #fff;
    font-weight: bold;
    font-size: 30rpx;
    line-height: 88rpx;
    text-align: center;
}

.dynamic_view {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 40rpx 30rpx 0rpx 30rpx;
    width: calc(100% - 60rpx);
    box-sizing: border-box;
    padding-bottom: 30rpx;
    border-bottom: #f1f1f1 2rpx solid;
}

.shaixuan {
    color: #999999;
    font-size: 28rpx;
}

.shaixuan_sel {
    color: #009977;
    font-size: 28rpx;
    font-weight: 500;
}

.one_line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    width: calc(100% - 40rpx);
    overflow-y: scroll;
    word-break: break-all;
    word-wrap: break-word;
}

.articleBottom-left {
    border: 1rpx solid #ccc;
    border-radius: 24rpx;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    line-height: 34rpx;
    font-weight: 400;
    height: 46rpx;
    padding-right: 12rpx;
    flex-direction: row;
    max-width: 250rpx;
}

.articleBottom-left .text {
    background-color: #ff822e;
    color: #fff;
    text-align: center;
    font-size: 24rpx;
    margin: 0 6rpx;
    border-radius: 50%;
    width: 34rpx;
    height: 34rpx;
    margin-right: 6rpx;
}

.articleBottom-right {
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.imgItem {
    position: relative;
    width: calc(100% / 3 - 8rpx);
    height: 222rpx;
    margin-right: 10rpx;

    &:nth-child(3n + 3) {
        margin-right: 0;
    }

    .imgPic {
        display: block;
        width: 100%;
        height: 100%;
        margin: 0;
        margin-right: 0;
    }

    .overLabel {
        border-top-left-radius: 10rpx;
        border-bottom-right-radius: 24rpx;
        line-height: 48rpx;
        width: 48rpx;
        height: 48rpx;
        text-align: center;
        font-size: 22rpx;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        bottom: 0;
        right: 0;
    }
}
</style>
